<!--
 * @Autor: 王琛
 * @Description: 图片预览
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#picturePreview {
  width: 100%;
  height: 100%;
  position: relative;

  :deep(.el-image) {
    .image-slot {
      font-size: 30px;
    }

    .image-slot .el-icon {
      font-size: 30px;
    }


    img {
      width: 100%;
      height: 100%;
    }
  }

  :deep(.el-image-viewer__wrapper) {
    img {
      background: #fff;
    }
  }
}
</style>


<template>
  <div id="picturePreview" v-viewer="{navbar:false,url:'dataSrc'}">
    <img style="width: 100%; height: 100%" :src="_data.url" :dataSrc="_data.srcList" alt="" srcset="">
  </div>
</template>


<script setup lang="ts">
import {onMounted, reactive, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {ElImage} from "element-plus"

const _props = defineProps({});
const _store = useStore();
const _state = _store.state;
const _route = useRoute()
const _data = reactive({
  url: "",
  srcList: [],
  path: "",
  planPath: "",
  reload: 0,
});


watch(() => _route.query, (newQuery) => {
  _data.path = newQuery.imgPath;
  _data.planPath = newQuery.imgPlan;
}, {deep: true, immediate: true});


onMounted(() => {
  watch(() => _state.currentSelectMenu.two, (newtwo) => {
    _data.url = `${_data.path}${newtwo.imgName}`
    _data.srcList[0] = `${_data.planPath}${newtwo.planImgName}`;
    _data.reload += 1;
  }, {deep: true, immediate: true})

})
</script>

